<template>
	<view class="shopdetil">
		<view class="top">
			商品评价
		</view>
		<view class="lists flex">
			<view class="list" v-for="(item , index) in infolist" :key="index">
				{{item}}
			</view>
		</view>
		<view class="card" v-for="(item , index) in 2" :key="index">
			<view class="flex">
				<image class="img1" src="../../../static/logo.png" mode=""></image>
				<view class="user">
					<view>
						名字
					</view>
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="mesg">
				内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
			</view>
			<view class="guige">
				规格
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infolist: ['好评', '中评', '差评', '有图'],
				count: 5,
				value: 2
			};
		}
	}
</script>

<style lang="scss" scoped>
	.shopdetil {
		padding: 15px;
		.top {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 10px;
		}

		.lists {
			flex-wrap: wrap;

			.list {
				margin: 5px;
				padding: 3px 10px;
				font-size: 26rpx;
				font-weight: 500;
				color: #777777;
				background: #F5F5F5;
				border-radius: 22rpx;
			}
		}

		.card {
			padding: 10px;
			border-bottom: 2px solid #cccccc;

			.img1 {
				width: 78rpx;
				height: 78rpx;
				margin-right: 10px;
			}

			.user {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.mesg {
				margin: 10px 0;
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.guige {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

		}
	}
</style>